<template>
    <div>
        <el-form :model="content" label-width="10em" >
            <div v-for="(item, idx) in content.list" :key="idx">
                <el-form-item :label="item.name" >
                    <el-select v-model="item.info.enable" placeholder="请选择" @change="changeEnable(item)">
                        <el-option label="启用" :value="true"></el-option>
                        <el-option label="禁用" :value="false"></el-option>
                    </el-select>
                    <el-checkbox-group
                        v-model="item.info.actionIds"
                        class="permission"
                        >
                        <el-checkbox v-for="action in item.actionList" :label="action.id" :key="action.id"  :disabled="!item.info.enable">
                            {{ action.name }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

            </div>

        </el-form>
        <span slot="footer" class="dialog-footer" >
                <el-button :loading="submitFlag" @click="dialogClose"
                >取 消</el-button
                >
                <el-button
                    :loading="submitFlag"
                    type="primary"
                    @click="save()"
                >保 存</el-button
                >
            </span>

    </div>
</template>

<script>
import {mapState} from "vuex";
import {getGroupIdPermission, updateGroupPermission} from "@/api/user";
import {get} from "@/api/request";

export default {
    name: "GroupPermission",
    components: {},
    mixins: [],
    props: {
        groupId: {
            type: Number,
            default: 2
        }
    },
    data() {
        return {
            submitFlag:false,
            content: {
                list: [
                    {
                        type: "zhiye",
                        name: "职业资格",
                        actionUrl: "/exam/industry/list",
                        actionList: [],
                        actionQueryData: {size: 100},
                        info: {
                            type: "zhiye",
                            enable: false,
                            actionIds: [],
                        }
                    },
                    {
                        type: "gjtk",
                        name: "高教题库",
                        actionUrl: "/exam/exam/list",
                        actionList: [],
                        actionQueryData: {size: 100,industryId:"gjtk"},
                        info: {
                            type: "gjtk",
                            enable: false,
                            actionIds: [],
                        }
                    },
                    {
                        type: "wpksApp",
                        name: "维普考试APP",
                        actionUrl: null,
                        actionList: [],
                        actionQueryData: {size: 1000},
                        info: {
                            type: "wpksApp",
                            enable: false,
                            actionIds: [],
                        }
                    },
                    {
                        type: "zyksApp",
                        name: "职业考试题库APP",
                        actionUrl: null,
                        actionList: [],
                        actionQueryData: {size: 1000},
                        info: {
                            type: "zyksApp",
                            enable: false,
                            actionIds: [],
                        }
                    },
                    {
                        type: "wpzstk",
                        name: "维普掌上题库",
                        actionUrl: null,
                        actionList: [],
                        actionQueryData: {size: 1000},
                        info: {
                            type: "wpzstk",
                            enable: false,
                            actionIds: [],
                        }
                    },
                ]
            },

        };
    },
    computed: {
        ...mapState({})
    },
    watch: {},
    created() {
        this.init();
        this.loadData();
    },
    mounted() {
    },
    methods: {
        loadData() {
            getGroupIdPermission({id: this.groupId}).then(res => {
                let infos = res || [];
                infos.forEach(c => {
                    this.content.list.forEach(l =>{
                        if (c.type === l.type){
                            l.info = c;
                        }
                    })
                })
            })
        },
        init() {
            this.content.list.forEach(c => {
                if(c.actionUrl){
                    get(c.actionUrl, c.actionQueryData).then(res => {
                        c.actionList = res || [];
                    })
                }

            })
        },
        dialogClose(){
            this.$confirm("数据还未保存，确定关闭吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() =>{
                this.$emit("close",true);
            });

        },
        save(){
            let arr = [];
            this.content.list.forEach(c =>{
                arr.push(c.info)
            })
            updateGroupPermission({id:this.groupId,permissionStr:JSON.stringify(arr)}).then( () =>{
                this.$message.success("修改成功!");
                this.$emit("close",true);
            })
        },
        changeEnable(data){
            console.log(data)
            if(data.info.enable){
                data.info.actionIds=data.actionList.map(res=>res.id)
            }else {
                data.info.actionIds=[];
            }
        }

    }
};
</script>

<style lang="scss" scoped>
.permission {
    margin-top: 10px;
    min-height: 100px;
    background-color: var(--f-b-root);
}
.dialog-footer {
    display: block;
    margin-top: 10px;
    text-align: right;
}
</style>

